<template>
  <div class="container">
    <el-card class="card">
      <h2>作业内容</h2>
      <p>{{ homework.profile }}</p>
      <h2>样例列表</h2>
      <div v-if="homework.sampleCase.length === 0">
        <p>没有可用的样例。</p>
      </div>
      <div v-else>
        <div v-for="(caseItem, index) in homework.sampleCase" :key="index" class="sample-item">
          <h3>样例 {{ index + 1 }}</h3>
          <div v-if="caseItem.type === '0'">
            <p>输入: {{ caseItem.input }}</p>
            <p>输出: {{ caseItem.output }}</p>
          </div>
          <div v-else>
            <p>教师隐藏该测试用例</p>
          </div>
        </div>
      </div>
    </el-card>
    <div class="editor-container">
      <el-select v-model="language" placeholder="选择语言" @change="handleLanguage">
        <el-option
            v-for="(languageItem, key) in languageOptions"
            :key="key"
            :label="languageItem"
            :value="languageItem">
        </el-option>
      </el-select>
      <div ref="editor" class="editor"></div>
      <div class="line-count">{{ lineCount }}</div>
      <div style="display: flex;">
        <div><el-button style="width: 80px;" @click="handleUpdate">暂存</el-button></div>
        <div style="margin-left: 10px;"><el-button style="width: 80px;" @click="handleSubmit">提交</el-button></div>
      </div>
    </div>
    <el-tab></el-tab>
  </div>
  <el-card>
    <h3>测试结果</h3>
      <div v-for="(responseData, responseIndex) in response.data" :key="responseIndex">
        <el-tag :type="getTagType(responseData.condition)">{{ getResultText(responseData.condition) }}</el-tag>
        <div v-if="responseData.condition !== '0'">
          <h3>测试样例 {{ responseIndex + 1 }}</h3>
          <div v-if="responseData.type === '0'">
              <p>实际输出: {{ responseData.actualOutput }}</p>
              <p>样例输入: {{ responseData.sampleInput }}</p>
              <p>样例输出: {{ responseData.sampleOutput }}</p>>
            </div>
            <div v-else>
              <p>教师隐藏该测试用例</p>
            </div>
        </div>
        <div v-else>
          <p>错误信息:</p>
          <p>{{ responseData.message }}</p>
        </div>
      </div>
  </el-card>
</template>

<script>
import * as monaco from 'monaco-editor'
import { toRaw } from 'vue'
import { getHomework } from '@/api/homeworkTeacher'
import { ojSubmit } from '@/api/ojSubmit'
import { ojUpdate } from '@/api/ojUpdate'

export default {
  data () {
    return {
      editor: null,
      editorValue: '',
      editorShow: false,
      homework: {
        homeworkId: '',
        teacherId: '',
        courseId: '',
        name: '',
        sampleCase: [],
        profile: ''
      },
      response: {
        data: []
      },
      code: '',
      status: '',
      language: 'cpp',
      languageOptions: ['cpp', 'c']
    }
  },
  mounted () {
    this.getDetail()
    this.init()
  },
  methods: {
    init () {
      this.editor = monaco.editor.create(this.$refs.editor, {
        value: this.editorValue,
        theme: 'CodeSampleTheme',
        language: this.language,
        overviewRulerBorder: false,
        automaticLayout: true,
        readOnly: false,
        fontSize: 15,
        minimap: { enabled: false },
        lineNumbers: 'on',
        lineNumbersMinChars: 3,
        scrollBeyondLastLine: false,
        scrollbar: {
          verticalScrollbarSize: 4,
          horizontalScrollbarSize: 4
        },
        contextmenu: false
      })

      monaco.editor.defineTheme('CodeSampleTheme', {
        base: 'vs',
        inherit: true,
        rules: [{ background: '#F6F6F7' }],
        colors: {
          'editor.background': '#F6F6F7'
        }
      })
    },
    async getDetail () {
      const gradeRequest = {
        homeworkId: this.$route.params.homeworkId
      }
      const res = await getHomework(gradeRequest)
      this.homework.courseId = res.data.data.courseId
      this.homework.homeworkId = res.data.data.homeworkId
      this.homework.name = res.data.data.name
      this.homework.profile = res.data.data.profile
      this.homework.sampleCase = res.data.data.sampleCase
      this.homework.teacherId = res.data.data.teacherId
    },
    handleLanguage (selectedLanguage) {
      this.language = selectedLanguage
      if (selectedLanguage === 'java') {
        toRaw(this.editor).setValue('class Solution {\n\tpublic static void main(String[] args) {\n\t\n\t}\n}')
      } else {
        toRaw(this.editor).setValue('')
      }
      monaco.editor.setModelLanguage(this.editor.getModel(), this.language)
    },
    getTagType (condition) {
      switch (condition) {
        case '0':
          return 'danger'
        case '1':
          return 'success'
        case '2':
          return 'danger'
        case '3':
          return 'warning'
        default:
          return 'info'
      }
    },
    getResultText (condition) {
      switch (condition) {
        case '0':
          return '编译出错'
        case '1':
          return '正确'
        case '2':
          return '错误'
        case '3':
          return '超时'
        default:
          return '未知状态'
      }
    },
    async handleUpdate () {
      this.code = toRaw(this.editor).getValue()
      const formData = new FormData()
      formData.append('gradeId', this.$route.params.gradeId)
      formData.append('code', this.code)
      let codeType = 0
      switch (this.language) {
        case 'cpp':
          codeType = 1
          break
        case 'c':
          codeType = 2
          break
        case 'java':
          codeType = 0
          break
      }
      formData.append('codeType', codeType)

      const res = await ojUpdate(formData)
      console.log(res)
    },
    async handleSubmit () {
      this.code = toRaw(this.editor).getValue()
      const formData = new FormData()
      formData.append('gradeId', this.$route.params.gradeId)
      formData.append('code', this.code)
      let codeType = 0
      switch (this.language) {
        case 'cpp':
          codeType = 1
          break
        case 'c':
          codeType = 2
          break
        case 'java':
          codeType = 0
          break
      }
      formData.append('codeType', codeType)

      const res = await ojSubmit(formData)
      this.response = res.data
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  display: flex;
}

.card {
  flex: 1;
  margin-right: 10px;
}

.editor-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.editor {
  width: 100%;
  min-height: 300px;
}

.line-count {
  font-size: 12px;
  color: #999;
  text-align: right;
  margin-top: 5px;
}

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>
